import React, { useState } from 'react';
import { useViewport } from '@/hooks/useViewport';
import ViewportControls from './modules/ViewportControls';

/**
 * 视口优化测试页面
 * 用于验证新的缩放实现方案
 */
const TestViewport: React.FC = () => {
  const [canvasSize] = useState({ width: 800, height: 600 });

  const { viewport, zoomIn, zoomOut, reset, fitToSize, handleWheel, canZoomIn, canZoomOut } =
    useViewport({
      minScale: 0.1,
      maxScale: 3,
      scaleStep: 0.1,
    });

  const handleFitToCanvas = () => {
    const container = document.getElementById('test-container');
    if (!container) return;

    const rect = container.getBoundingClientRect();
    fitToSize(rect.width, rect.height, canvasSize.width, canvasSize.height, 40);
  };

  const handleContainerWheel = (e: React.WheelEvent) => {
    const rect = e.currentTarget.getBoundingClientRect();
    handleWheel(e.nativeEvent, rect);
  };

  return (
    <div className="h-screen bg-gray-100 p-4">
      <div className="mb-4 bg-white p-4 rounded shadow">
        <h1 className="text-xl font-bold mb-2">视口缩放优化测试</h1>
        <div className="text-sm text-gray-600">
          <p>• 使用 Ctrl/Cmd + 滚轮进行缩放</p>
          <p>
            • 画布逻辑尺寸固定为 {canvasSize.width}x{canvasSize.height}
          </p>
          <p>• 元素坐标始终在有效范围内</p>
          <p>• 当前缩放比例: {Math.round(viewport.scale * 100)}%</p>
        </div>
      </div>

      <div
        id="test-container"
        className="relative bg-white rounded shadow overflow-hidden"
        style={{ height: 'calc(100vh - 200px)' }}
        onWheel={handleContainerWheel}
      >
        {/* 视口变换容器 */}
        <div
          className="absolute inset-0 origin-top-left transition-transform duration-200 ease-out"
          style={{
            transform: `translate(${viewport.translateX}px, ${viewport.translateY}px) scale(${viewport.scale})`,
            transformOrigin: '0 0',
          }}
        >
          {/* 画布容器 - 固定逻辑尺寸 */}
          <div
            className="relative bg-blue-50 border-2 border-blue-200"
            style={{
              width: canvasSize.width,
              height: canvasSize.height,
            }}
          >
            {/* 网格背景 */}
            <div
              className="absolute inset-0 opacity-20"
              style={{
                backgroundImage: `
                  linear-gradient(to right, #3b82f6 1px, transparent 1px),
                  linear-gradient(to bottom, #3b82f6 1px, transparent 1px)
                `,
                backgroundSize: '20px 20px',
              }}
            />

            {/* 测试元素 */}
            <div className="absolute top-4 left-4 bg-red-500 text-white p-2 rounded">
              元素 A (20, 20)
            </div>

            <div className="absolute top-20 left-40 bg-green-500 text-white p-2 rounded">
              元素 B (160, 80)
            </div>

            <div className="absolute bottom-20 right-20 bg-purple-500 text-white p-2 rounded">
              元素 C (右下角)
            </div>

            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-yellow-500 text-black p-4 rounded">
              中心元素 ({canvasSize.width / 2}, {canvasSize.height / 2})
            </div>

            {/* 坐标系标识 */}
            <div className="absolute top-2 left-2 text-xs text-gray-600">(0, 0)</div>
            <div className="absolute bottom-2 right-2 text-xs text-gray-600">
              ({canvasSize.width}, {canvasSize.height})
            </div>
          </div>
        </div>

        {/* 视口控制组件 */}
        <ViewportControls
          viewport={viewport}
          onZoomIn={zoomIn}
          onZoomOut={zoomOut}
          onReset={reset}
          onFitToCanvas={handleFitToCanvas}
          canZoomIn={canZoomIn}
          canZoomOut={canZoomOut}
          position="top-right"
        />
      </div>
    </div>
  );
};

export default TestViewport;
